<script setup>
import {showDialog} from 'vant';
import axios from 'axios';
import { useRoute } from 'vue-router';
import router from '@/router/index.js';
import { check } from '@/apis/testAPI';
import {ref} from 'vue';

const photo=ref();
const data=ref('');
const route=new useRoute();
const flag=ref();

const query_id=route.query.messageId;
  if(query_id==undefined||query_id==null)
{
    showDialog({
      message:' 打开网页失败!!',
    }).then(() => {
        router.push('/index')
    });
}

check().then(res=>{
    if(res.data.code==1200){
    //如果用户没有登录，指向动态登录界面
    let url='https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxdadd0122365919e8&scope=snsapi_userinfo&response_type=code&redirect_uri=http://175.178.62.164:61803/wxuser/getSignUpUserInfo?url=/result?messageId='+query_id+'&expires_in=3600#wechat_redirect'
    var a = document.createElement('a');
    a.setAttribute('href', url);
    a.setAttribute('target', '_blank');
    a.setAttribute('id', 'redict');
// 防止反复添加
    if(document.getElementById('redict')) {
	    document.body.removeChild(document.getElementById('redict'));
    }
    document.body.appendChild(a);
    a.click();
    }
}).catch(err=>{
    console.log(err);
})

const formdata=new FormData();
formdata.append('messageId',(query_id));       //不能直接在这里转为整形，必须set重新设置

axios({
    url:'http://175.178.62.164:61803/message/detail',
    method:'post',
    data:formdata,
    withDefaults:true
}).then(res=>
    {
    if(res.data.code==401){
        showDialog({
      message:' 获取信息失败!!',
    }).then(() => {
        router.push('/index')
    }).catch(()=>{
        console.log('失败');
    });
    }
    else if(res.data.code==403){
        showDialog({
      message:' 获取信息失败!!',
    }).then(() => {
        router.push('/index')
    }).catch(()=>{
        console.log('失败');
    });
    }
    
    if(res.data.code==0){
        data.value=res.data.data;            //赋值
        if(res.data.data.ticket!=undefined){        //若不为空,则显示,flag=true
            photo.value="http://175.178.62.164:61803/"+res.data.data.ticket;
            flag.value=true;
        }
        console.log(data.value);
    }
}).catch(err=>{
    console.log(err);
});
</script>

<template>
    <div class="box">
        <div class="main_box">
            <div class="box1">
                    <p class="p1">{{ data.title }}</p>
                    <p class="p2">{{ data.content }}</p>
            </div>
            <van-dialog v-model:show="show"></van-dialog>
        </div>
        <div class="image" v-if="flag">
            <img :src="photo" alt="图片加载失败!" v-if="flag">
        </div>
    </div>
</template>

<style scoped>
.box{
    background-image: linear-gradient(
    #4993fa,
    #9dc6ff,
    #a0e4f1,
    #f1fafb
  );
  height: 100vh;
}
.main_box{
    padding-top: 100px;
}
.box1{
    box-sizing: border-box;
    background-color: white;
    width: 325px;
    margin:0 auto;
    padding: 0 20px;
    box-shadow: 7px 7px 10px #535353;
    border-radius: 30px;
}
.first_line{
    margin: 10px 10px;
    width: 120px;
}
.second_line{
    margin-top: 10px;
    width: 220px;
}
.button{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.p1{  
    padding:30px;
    margin: 0;
    text-align: center;
    font-size: 20px;
}
.p2{
    padding: 0 0 30px 0;
    text-align: center;
    font-size: 18px;
    margin: 0;
}
.image{
    width:262px;
    margin:0 auto;
    padding: 30px 20px;
}
.image>img{
    width: 100%;
    object-fit: contain;
}
.notice{
    display: flex;
    padding-left: 70px;
}
p{
    word-wrap: break-word;
}
</style>